<template>
  <div>
    <!-- <el-tag type="warning">请检查信息,若有错误找管理员</el-tag> -->

    <el-form
      ref="companyForm"
      :model="companyForm"
      label-width="100px"
      fullscreenLoading
    >
      <el-upload
        style="margin-left: 15%"
        :headers="headers"
        class="avatar-uploader"
        action="http://localhost:8001/ems/admin/upload/avatar"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <el-avatar
          v-if="companyForm.avatar"
          shape="square"
          :key="companyForm.avatar"
          :size="150"
          alt="企业Logo"
          :src="
            companyForm.avatar.indexOf('http') == -1
              ? BASE_API + '/' + companyForm.avatar
              : companyForm.avatar
          "
          style="margin-left: 15%"
        ></el-avatar>
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <el-form-item label="企业名称">
        <el-input
          v-model="companyForm.name"
          placeholder="请输入企业名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="企业编码">
        <el-input
          v-model="companyForm.code"
          placeholder="请输入企业编码"
        ></el-input>
      </el-form-item>
      <el-form-item label="企业描述">
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 6 }"
          placeholder="请输入内容"
          v-model="companyForm.description"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="联系热线">
        <el-input
          v-model="companyForm.phone"
          placeholder="请输入联系热线"
        ></el-input>
      </el-form-item>
      <el-form-item label="企业地址">
        <el-input
          v-model="companyForm.address"
          placeholder="请输入企业地址"
        ></el-input>
      </el-form-item>
      <el-form-item label="企业邮箱">
        <el-input
          v-model="companyForm.mail"
          placeholder="请输入企业邮箱"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="submitForm('companyForm')"
          v-loading.fullscreen.lock="fullscreenLoading"
          >确认修改</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { reqQueryResumeById } from '@/views/Custom/ResumeMng/api/ResumeMngApi';
import { mapGetters } from 'vuex';
import { getToken } from '@/utils/auth';
import { reqQueryCompanyInfoByID } from './api/companyMngApi';
import { doEditUser } from '@/api/user';
export default {
  name: 'ShowInfo',
  computed: {
    ...mapGetters(['loginId', 'description', 'avatar']),
    ...mapGetters('CompanyMng', ['companyInfo']),
    // ...mapGetters('loginId'),
  },
  watch: {
    companyInfo() {
      this.companyForm = {
        ...this.companyInfo,
      };
    },
  },
  data() {
    return {
      BASE_API: process.env.VUE_APP_BASE_API, // 前缀
      fullscreenLoading: false, // 遮罩层
      hasAvatar: false,
      imageUrl: '',
      companyForm: {
        avatar: '',
      },
      headers: {
        'X-Token': getToken(),
      },
      optionProps: {
        value: 'id',
        label: 'name',
        children: 'children',
      },
    };
  },
  mounted() {
    this.getUserInfo();
    this.getDepAndMajorAndClassroomMenu();
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.companyForm.avatar = res.data.fileName;
    },
    beforeAvatarUpload(file) {
      const isJPG =
        file.type === 'image/jpeg' ||
        file.type === 'image/png' ||
        file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/png/jpeg 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },

    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.fullscreenLoading = true;
          try {
            debugger;
            let result = {};
            result = await this.$store.dispatch(
              'CompanyMng/editCompany',
              this.companyForm
            );
            this.$message({
              message: result.message,
              type: 'success',
              duration: 2 * 1000,
            });
            // 更新企业列表
            this.getCompanyList();
          } catch (error) {
            Message.error(error || 'Has Error');
          } finally {
            this.fullscreenLoading = false;
            this.isAdd = false;
            this.centerDialogVisible = false;
          }
        } else {
          return false;
        }
      });
    },

    editResume() {
      this.$router.push({
        name: 'resumeEdit',
      });
    },

    // 检测简历是否编辑
    checkEidtResume() {
      // 编辑简历
      reqQueryResumeById(this.loginId).then((res) => {
        this.$confirm(res.message, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.$router.push({
              name: 'resumeEdit',
            });
          })
          .catch(() => {});
      });
    },
    previewResume() {
      this.checkEidtResume();
      this.$router.push({
        name: 'resumetemplate',
      });
    },
    // 获取用户信息
    getUserInfo() {
      reqQueryCompanyInfoByID(this.loginId).then((res) => {
        this.companyForm = res.data.companyInfo;
        this.companyForm.avatar = this.avatar;
      });
    },
    // 获取院系、专业、班级的编号与名称树
    getDepAndMajorAndClassroomMenu() {
      this.$store.dispatch('StudentMng/getDepAndMaJorAndClassroomMenu');
    },

    // 级联选择器
    cascaderChange() {
      // this.$refs["departmentAndMajor"].getCheckedNodes()//完整的数据
      //this.$refs["departmentAndMajor"].getCheckedNodes()[0].pathLabels//value的值
    },
    // 回到学生列表
    back() {
      this.$router.replace({
        name: 'companyList',
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import '~@/styles/variables.scss';

.formStyle {
  @extend .marginStyle;

  .inputWdith {
    width: $formWidth;
  }
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
